var UserName=React.createClass({
	getInitialState:function(){
		return {
			errorMsg:''
		};
	},
	handleChange:function(e){
		var name=this.refs.NameInput.getDOMNode().value;
		var errorMsg=this.validate(name)?'':'invalid user name';
		this.setState({
			errorMsg:errorMsg
		});
	},
	render:function(){
		return (
			<div>
				<input name='Name' required placeholder='用户名'
				ref='NameInput' onChange={this.handleChange}/>
				<span>{this.state.errorMsg}</span>
			</div>	
		);
	},
	validate:function(name){
		return /^[a-zA-Z]\w{5,}$/.test(name);
	}
});

var Password=React.createClass({
	getInitialState:function(){
		return {
			passwordMsg:'',
			confirmPasswordMsg:''
		};
	},
	passwordChange:function(){
		var password=this.refs.passwordInput.getDOMNode().value;
		var confirmPassword=this.refs.passwordConfirmInput.getDOMNode().value;
		var passwordMsg=this.validatePassword(password)?'':'invalid password';
		var confirmPasswordMsg=confirmPassword?
			this.getConfirmValidateMsg(password,confirmPassword):'';
		this.setState({
			passwordMsg:passwordMsg,
			confirmPasswordMsg:confirmPasswordMsg
		});
	},
	confirmPasswordChange:function(){
		var password=this.refs.passwordInput.getDOMNode().value;
		var confirmPassword=this.refs.passwordConfirmInput.getDOMNode().value;
		var confirmPasswordMsg=this.getConfirmValidateMsg(password,confirmPassword);
		this.setState({
			confirmPasswordMsg:confirmPasswordMsg
		});
	},
	render:function(){
		return (
			<div>
				<div>
					<input type='password' name='Password' placeholder='密码'
					required ref='passwordInput' onChange={this.passwordChange}/>
					<span>{this.state.passwordMsg}</span>
				</div>
				<div>
					<input type='password' name='ConfirmPassword' placeholder='重复密码'
					required ref='passwordConfirmInput' onChange={this.confirmPasswordChange}/>
					<span>{this.state.confirmPasswordMsg}</span>
				</div>
			</div>
		);
	},
	validatePassword:function(password){
		return /\d{6,}/.test(password);
	},
	validateConfirmPassword:function(password,confirmPassword){
		return password===confirmPassword;
	},
	getConfirmValidateMsg:function(password,confirmPassword){
		var confirmPasswordMsg='';
		if(!this.validatePassword(confirmPassword)){
			confirmPasswordMsg='invalid confirm password';
		}else if(!this.validateConfirmPassword(password,confirmPassword)){
			confirmPasswordMsg='confirm password doesn\'t match password';
		}
		return confirmPasswordMsg;
	}
});

var InviteCode=React.createClass({
	getInitialState:function(){
		return {
			errorMsg:''
		};
	},
	handleChange:function(e){
		var code=this.refs.InviteCodeInput.getDOMNode().value;
		var errorMsg=this.validate(code)?'':'invalid invite code';
		this.setState({
			errorMsg:errorMsg
		});
	},
	render:function(){
		return (
			<div>
				<input name='InviteCode' required placeholder='邀请码'
				ref='InviteCodeInput' onChange={this.handleChange}/>
				<span>{this.state.errorMsg}</span>
			</div>	
		);
	},
	validate:function(code){
		return /\d{6,}/.test(code);
	}
});

var Register=React.createClass({
	render:function(){
		return (
			<form method='POST'>
				<UserName/>
				<Password/>
				<InviteCode/>
				<div>
					<button type="submit">注册</button>
				</div>
			</form>
		);
	}
});